<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let data = {
            name:'尚硅谷',
            address:'北京',
        };
        let vm = {};
        // 创建一个监视data的实例对象
        const o = new Obsever(data);
        // 1. 实现对data加工 (o能够监听data的变化)
        data = o;
        // 2. 令 vm._data = data; (使得vm能够监听data的变化)
        vm['_data'] = data;

        function Obsever (obj){
            // 将data中的属性提取出来并放到数组中
            const keys = Object.keys(obj);
            // 遍历data中的属性(ele为data的各个属性)
            keys.forEach(ele => {
                // 往实例对象中添加数据(this指向实例对象0)
                Object.defineProperty(this, ele, {
                    get(){
                        return obj[ele];
                    },
                    set(value){
                        obj[ele] = value;
                    },
                });
            });
        }
    </script>
</body>
</html>